import { ref, computed } from "vue";

export function useFaqButton() {
  // 当前选中的按钮
  const selectedBtn = ref<"l" | "r" | "">("");

  // 按钮样式
  const btnStyle = (type: "l" | "r") =>
    computed(() => {
      const isActive = selectedBtn.value === type;

      return {
        color: isActive ? "#FFFFFF" : "#FF0000",
        bgcolor: isActive ? "#FF0000" : "#FFFFFF",
        hairline: isActive ? false : true,
        LinearGradien: isActive,
      };
    });

  // 切换按钮
  const selectBtn = (type: "l" | "r") => {
    selectedBtn.value = type;
  };

  // 重置按钮状态和颜色
  const resetBtn = () => {
    selectedBtn.value = "";
  };

  return {
    resetBtn,
    btnStyle,
    selectBtn,
  };
}
